<template>
  <!-- 坐席工单处理报表 -->
  <div class="seatsOrderHand">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item label="一级业务类型" prop="businessType1">
            <SelectForDict :code.sync="formData.businessType1" dict-type-code="FIRST_LEVEL_BUSINESS_TYPE" placeholder="请选择一级业务类型" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item label="二级业务类型" prop="businessType2">
            <SelectForDict :code.sync="formData.businessType2" dict-type-code="SECOND_LEVEL_BUSINESS_TYPE" placeholder="请选择二级业务类型" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item prop="groupId" label="业务组">
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              lable-name="groupName"
              :value.sync="formData.groupId"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="accountNo" label="坐席">
            <SearchSelectPicker
              :url="`/call-center/api/v1/businessGroup/member/page/${formData.groupId}`"
              placeholder="请选择执行坐席"
              value-name="accountNo"
              lable-name="staffName"
              :value.sync="formData.accountNo"
              :parent-id="formData.groupId"
              :disabled="!formData.groupId"
              must-pid
              clearable
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="queryDate" label="统计周期">
            <el-date-picker
              v-model="formData.queryDate"
              type="daterange"
              value-format="yyyy-MM-dd"
              opt
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <ExportPane :table-config="tableConfig" :query-data-fun="queryHandle" filename="坐席工单处理报表">导出</ExportPane>
            <Button type="primary" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig">

      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import SelectForDict from '@/components/SelectForDict'
import ExportPane from '@/components/ExportPane'
import { filtersRaw } from '@/utils'
export default {
  name: 'ReportFormSeatsOrderHand',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    SearchSelectPicker,
    SelectForDict,
    ExportPane
  },
  data() {
    return {
      formData: {},
      formRules: {
        queryDate: {
          required: true,
          message: '请选择统计周期',
          trigger: 'blur'
        }
      },
      otherFilters: [],
      tableConfig: {
        interfacePath: '/call-center/api/v2/workOrder/report/agent/page',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'accountNo',
            label: '坐席'
          },
          {
            prop: 'createCount',
            label: '工单创建量'
          },
          {
            prop: 'saveCount',
            label: '保存量'
          },
          {
            prop: 'dispatchCount',
            label: '派单量'
          },
          {
            prop: 'notReceiveCount',
            label: '未接收量'
          },
          {
            prop: 'allReceiveCount',
            label: '全部接收量'
          },
          {
            prop: 'partReceiveCount',
            label: '部分接收量'
          },
          {
            prop: 'processingCount',
            label: '处理中量'
          },
          {
            prop: 'finishCount',
            label: '结案量'
          },
          {
            prop: 'dispatchAddCount',
            label: '新增量'
          }
          // {
          //   prop: 'replyCount',
          //   label: '回复量'
          // }
        ]
      }
    }
  },
  mounted() {},
  methods: {
    // 根据条件查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const list = []
        for (const i in this.formData) {
          if (i === 'queryDate') {
            if (this.formData[i] && this.formData[i].length) {
              list.push(filtersRaw('beginDate', this.formData[i][0], '>='))
              list.push(filtersRaw('endDate', this.formData[i][1], '<='))
            }
          } else {
            if (this.formData[i] || this.formData[i] === 0) {
              list.push(filtersRaw(i, this.formData[i], '='))
            }
          }
        }
        this.otherFilters = list
        if (this.otherFilters.length <= 0) {
          this.$message.warning('请选择筛选条件!')
          return
        }
        if (!this.otherFilters.some(e => e.property === 'beginDate')) {
          this.$message.warning('请选择统计周期!')
          return
        }
        // return
        if (type !== 'export') {
          this.$nextTick(() => {
            this.$refs.table.initTableData()
          })
        }
        return list
      })
    }
  }
}
</script>
<style lang='scss' module>
</style>
